<template>
	<div class="maintain_container" v-loading="loading">
		<el-tabs v-model="activeName" type="card">
			<el-tab-pane label="液氦记录" name="1"></el-tab-pane>
			<el-tab-pane label="液氮记录" name="2"></el-tab-pane>
		</el-tabs>
		<div class="sw_system_container">
			<div class="sw_query_form" v-if="$isHasAuth(topFrames)">
				<div class="button" v-if="$isHasAuth(topButton)">
					<el-button type="primary" icon="el-icon-plus" @click="handleOpenForm()">新增记录</el-button>
					<el-button type="danger" icon="el-icon-delete" @click="handleBacthDelete()">删除</el-button>
				</div>
				<el-form size="small" inline v-hasPermi="'7a1ce38894794f1b8f8f7028cc1f92e6'">
					<el-form-item>
						<el-input v-model="queryData.name" clearable :placeholder="nameLabel" style="width: 180px"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="queryTableData">查询</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="sw_table_container">
				<el-table ref="table" :data="tableData" height="100%" class="index_table_wrapper" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="48" align="center"></el-table-column>
					<el-table-column label="实验时间段" width="230" :formatter="timeRangeFormat"></el-table-column>
					<el-table-column :label="nameLabel" min-width="150" prop="name"></el-table-column>
					<el-table-column :label="`${quantityLabel}(升)`" prop="quantity" min-width="110"></el-table-column>
					<el-table-column label="领用人" prop="filed1" min-width="150"></el-table-column>
					<el-table-column label="运行维护人员" prop="createName" min-width="150"></el-table-column>
					<el-table-column label="操作" :width="$controlWidth(tableButton)" v-if="$isHasAuth(tableButton)">
						<template slot-scope="{ row }">
							<el-button type="text" v-hasPermi="'7a1ce38894794f1b8f8f7028cc1f92e6'" @click="handleOpenForm(row.id)">编辑</el-button>
							<el-button type="text" v-hasPermi="'7a1ce38894794f1b8f8f7028cc1f92e6'" @click="handleDeleteData(row.id)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<template v-if="dataCount > 0">
				<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData"></sw-pagination>
			</template>
		</div>
		<form-dialog v-model="formDialog" :data-id="dataId" :type="activeName" @finish="queryTableData"></form-dialog>
	</div>
</template>

<script>
import moment from 'moment';
import formDialog from './form';
import { queryUserPageList, batchDeleteData } from '@/api/business/tbSafeguard';
export default {
	components: { formDialog },
	data() {
		return {
			loading: false,
			dataCount: 0,
			queryData: { page: 1, limit: 15 },
			tableData: [],
			activeName: '1',
			checkedData: [],
			formDialog: false,
			dataId: ''
		};
	},
	computed: {
		topButton() {
			return ['32096eafd627488b8a217ff8556a5d14', '982ef51f2a5e43abbba10d24c95792a7'];
		},
		topFrames() {
			return [...this.topButton, '7a1ce38894794f1b8f8f7028cc1f92e6'];
		},
		tableButton() {
			return ['6633e7c67fdc4097b0387da468636a96', '982ef51f2a5e43abbba10d24c95792a7'];
		},
		nameLabel() {
			if (this.activeName === '1') {
				return '实验PI';
			} else if (this.activeName === '2') {
				return '实验站';
			}
		},
		quantityLabel() {
			if (this.activeName === '1') {
				return '液氦消耗';
			} else if (this.activeName === '2') {
				return '液氮消耗';
			}
		}
	},
	watch: {
		activeName: {
			handler(val) {
				this.queryTableData();
			},
			immediate: true
		}
	},
	methods: {
		//获取数据列表
		async getTableData() {
			let params = { ...this.queryData, type: this.activeName };
			let result = await queryUserPageList(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.tableData = result.data || [];
			}
		},

		//查询数据列表
		queryTableData() {
			this.loading = true;
			this.getTableData();
		},

		//时间段格式化
		timeRangeFormat(data) {
			let endTime = moment(data.endTime).format('YYYY-MM-DD');
			let startTime = moment(data.startTime).format('YYYY-MM-DD');
			return `${startTime} 至 ${endTime}`;
		},

		handleSelectionChange(data) {
			this.checkedData = [...data];
		},

		handleOpenForm(id) {
			this.dataId = id;
			this.formDialog = true;
		},

		handleDeleteData(id) {
			let that = this;
			let ids = [id];
			that.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await that.deleteDataRequest(ids);
						instance.confirmButtonLoading = false;
						done();
					} else {
						done();
					}
				}
			}).catch(() => {});
		},

		handleBacthDelete() {
			let that = this;
			let ids = this.checkedData.map((n) => n.id);
			that.$confirm('此操作将永久删除选中数据, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await that.deleteDataRequest(ids);
						instance.confirmButtonLoading = false;
						done();
					} else {
						done();
					}
				}
			}).catch(() => {});
		},

		//删除数据
		async deleteDataRequest(params) {
			let result = await batchDeleteData(params).then((res) => res.data);
			if (result.code === '0') {
				this.$emit('finish');
				this.queryTableData();
				this.$showCustomMessage('success', `删除数据成功！`);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
:deep(.maintain_container) {
	display: flex;
	flex-direction: column;
	height: 100%;
	.el-tabs {
		flex-shrink: 0;
	}
	.el-tabs__header {
		margin-bottom: 0;
	}
	.el-tabs__item {
		font-size: 16px;
		&.is-active {
			background-color: #fff;
		}
	}
	.sw_system_container {
		flex: 1;
		overflow: hidden;
		border: solid 1px #e4e7ed;
		border-top: none;
	}
}
</style>
